{% extends "base.html" %}

<body>
{% comment %}{% block category %}
    <div class="navWarp">
        <div class="nav">
            <a name="category" href="#" class="cut">ALL</a>
            {% for category in categorys %}
                <a name="category" href="#">{{ category.name }}</a>
            {% endfor %}
        </div>
    </div>
{% endblock %}{% endcomment %}
{% block detail %}

    <div id="main" role="main" class="main">
        <ul id="tiles">
            <!-- These are our grid blocks -->
            {% if articles %}
                {% for article in articles %}
                    <li class='box'>
                        <div class="content">
                            <div class="con_pic">
                                <div class="con_con">
                                    {% if article.imgs %}
                                        <img src="/media/image/{{ article.imgs }}" alt="">
                                    {% endif %}
                                </div>
                                <div class="con_pic_name">
                                    <h3><a href="/detail/{{ article.id }}"
                                           target="_blank">{{ article.title|striptags }}</a></h3>

                                    <div class="name"><a href="#">{{ article.user.username }}</a></div>
                                    <div class="time"><a href="#">{{ article.date|date:"SHORT_DATE_FORMAT" }}</a></div>
                                    <div class="type"><a href="#">{{ article.category }}</a></div>
                                    {% if article.comment_count %}
                                        <div class="attention">{{ article.comment_count }}</div>
                                    {% endif %}
                                </div>
                                <div class="con_script">
                                    <p>{{ article.content|safe|removetags:"img"|truncatewords_html:"40" }}</p></div>
                            </div>
                            <div class="con_dis"><span><a href="#" onclick="upvote('{{ article.id }}')"><img
                                    src="/js/images/btn01.png" width="28" height="28"/></a>{{ article.up }}</span><span><a
                                    href="#" onclick="downvote('{{ article.id }}')"><img src="/js/images/btn02.png"
                                                                                         width="28"
                                                                                         height="28"/></a>{{ article.down }}</span>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
            <!-- End of grid blocks -->
        </ul>
        <input type="hidden" name="no" value="10">
    </div>
{% endblock %}

</body>
{% block js %}
    <script src="/js/jquery.masonry.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var flag = true;
        /**
         * When scrolled all the way to the bottom, add more tiles.
         */
        function onScroll(event) {
            // Check if we're within 100 pixels of the bottom edge of the broser window.
            var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
            if (closeToBottom && flag) {
                flag = false;
                // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
                var items = $('#tiles li');
                if (items.length < 500) {
                    var category = '';
                    $("a[name=category]").each(function (i) {
                        if ($(this).hasClass('cut')) {
                            category = $(this).html();
                        }
                    });
                    $.ajax({
                        type:"get",
                        url:"/article/personalAjax/",
                        data:{ no:items.length, category:category},
                        dataType:"html",
                        success:function (data) {
                            if (data) {
                                flag = true;
                            }
                            var boxdata = $(data);
                            $('#tiles').append(data).masonry('reload');
                        }
                    });
                }
            }
        }
        $(".cut").click();
        $(function () {
            $(document).bind('scroll', onScroll);
            var $container = $('#tiles');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector:'.box',
                    isAnimated:true
                });
            });
            $("a[name=category]").click(function () {
                        $("a[name=category]").each(function (i) {
                            $(this).removeClass();
                        });
                        $(this).addClass("cut");
                        var category = $(this).html();
                        $.ajax({
                            type:"get",
                            url:"/article/personalAjax/",
                            data:{ no:0, category:category},
                            dataType:"html",
                            success:function (data) {
                                if (data) {
                                    flag = true;
                                }
                                var boxdata = $(data);
                                $('#tiles').empty();
                                $('#tiles').append(data).masonry('reload');
                            }
                        });
                    }
            );

        });
        function upvote(id) {
            $.ajax({
                type:"get",
                url:"/upvote/" + id,
                dataType:"html",
                success:function (data) {
                    alert(data);
                }
            });
        }
        function downvote(id) {
            $.ajax({
                type:"get",
                url:"/downvote/" + id,
                dataType:"html",
                success:function (data) {
                    alert(data);
                }
            });
        }
    </script>
{% endblock %}
</html>